<template>
	<view class="page content">
		<TopHead :title="'个人信息'"></TopHead>
		<view class="contBox">
			<view class="head-img-box">
				<button class="button-wrapper flex-items flex-end flex-1" open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar">
					<image class="user-headImg" v-if="headImage" :src="path+ headImage"></image>
					<image class="user-headImg" v-else
						src="https://ceres.zkthink.com/static/img/user/morentouxiang.png">
					</image>
					<image class="head-icon" src="../../static/images/userInfo-icon.png"></image>

				</button>
			</view>
			<view class=" iteminput">
				<text class="text1">姓 名</text>
				<input class="uni-input ipt" type="nickname" name="nickname" v-model="nickname" placeholder="请输真实姓名" />
			</view>
			<view class="iteminput">
				<text>手机号码</text>
				<input class="uni-input ipt" type="text" v-model="phone" @blur="changePhone" placeholder="请输入手机号码" />
			</view>
			<view class="iteminput">
				<text class="text1">生 日</text>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
			<view class="iteminput">
				<text class="text1">性 别</text>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>
			<view class="submitBtn" @click="submit()">确认并提交</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
				list: [], // 列表
				page: 1,
				pageSize: 20, // 
				total: 0, // 总数
				hotList: [], // 热销
				headImage: '', // 头像
				nickname: '', // 名字
				phone: '', // 
				index: 0,
				array: ['女', '男'],
				date: currentDate,
				userInfo: {}, // 信息容器
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.userData()
		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
			}
		},
		methods: {
			onChooseAvatar(e) {
				this.headImage = e.detail.avatarUrl
				console.log(e.detail.avatarUrl)
				let file = e.detail.avatarUrl
				let _that = this
				// return
				uni.uploadFile({
					url: _that.$http.baseUrl + '/common/upload/', //附件上传的服务器接口地址，非真实的接口地址
					filePath: file, //要上传文件资源的路径,不同的组件
					name: 'files', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容,即附件信息的接收字段名称
					formData: { //HTTP 请求中其他额外的 form data	

					},
					success: (res) => { //回调方法
						console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data);
						_that.headImage = data.data
						console.log(data)

						// that.listFiles.push(data.url);


					}
				});
			},
			// 个人信息数据
			userData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				_this.$http.fetchData({
					url: '/wechatApplet/customer/user/' + userId,
					method: 'GET',
					data: {

					},
					success(res) {
						_this.userInfo = res.data
						_this.headImage = res.data.avatar
						_this.nickname = res.data.realName
						_this.phone = res.data.userName
						_this.date = res.data.birthday
						_this.index = res.data.gender
						console.log(res)

					}
				})
			},
			// 查看详情
			announcementDetails(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?id=${id}`
				uni.navigateTo({
					url: `/pages/index/announcementDetails${paramsStr}`
				})
			},
			// 电话
			changePhone(e) {
				console.log(e.detail.value)
				this.phone = e.detail.value
			},
			// 日期生日
			bindDateChange(e) {
				this.date = e.detail.value
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 提交数据
			submit() {
				let _this = this
				let data = {
					id: uni.getStorageSync('id'),
					openId: uni.getStorageSync('openId'),
					avatar: _this.headImage,
					realName: _this.nickname,
					userName: _this.phone,
					birthday: _this.date,
					gender: _this.index
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/user/',
					method: 'PUT',
					data: data,
					success(res) {
						console.log(res)
						uni.navigateBack()
					}
				})
			},

		}
	}
</script>

<style scoped>
	.content {
		background: rgba(62, 122, 233, 0.05);
		padding-bottom: 60rpx;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.contBox {
		padding: 30rpx;
		padding-top: 196rpx;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #5d4529;
	}

	.time {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #b8c5d3;
		margin-top: 30rpx;

	}

	.details {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #22172a;
	}

	.head-img-box {
		text-align: center;
		margin-top: 60rpx;
	}

	.button-wrapper {
		width: 162rpx;
		height: 162rpx;
		background: none;
		padding-right: 0;
		padding: 0;
		display: inline-block;
		position: relative;
	}

	.head-img-box .button-wrapper .head-icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		right: 8rpx;
	}

	.button-wrapper::after {
		border: none;
	}

	.user-headImg {
		width: 162rpx;
		height: 162rpx;
		background: rgba(0, 0, 0, 0.00);
		border-radius: 50%;
		border: 1rpx solid #e5e5e5;
		box-sizing: border-box;
	}

	.iteminput {
		position: relative;
		padding-left: 206rpx;
		line-height: 131rpx;
		border-bottom: 2rpx solid rgba(94, 94, 94, 0.1);
		height: 131rpx;
	}

	.iteminput text {
		line-height: 38rpx;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -19rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.iteminput .ipt {
		height: 131rpx;
	}

	.iteminput .ipt ::placeholder {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;

	}

	.iteminput .text1 {
		letter-spacing: 24rpx;
	}

	.submitBtn {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
		line-height: 42rpx;
		text-align: center;
		margin: 0 auto;
		width: 590rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		margin-top: 242rpx;
	}
</style>